<template>
	<view :class="['o-grid-item', Col, Gutter, Square, Border]" @tap="onClick">
		<view :class="['o-grid-item_content',colorClass,bgClass,Radius]" :style="colorStyle" :hover-class="hoverClass" v-if="$slots.default"><slot /></view>
		<view :class="['o-grid-item_content p', Radius, Direction, bgClass]" :hover-class="hoverClass" :style="bgStyle" v-else>
			<view :class="['o-icon', Size]">
				<text :class="{'badge':badge,'dot':dot && !badge}">{{badge}}</text>
				<text v-if="iconFont" :class="['txt', iconFont,colorClass]" :style="colorStyle"></text>
				<image v-else :src="iconImg" class="img" :mode="mode"></image>
			</view>
			<view :class="['o-text',colorClass]" :style="colorStyle">{{text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'oGridItem',
		// #ifdef MP-WEIXIN
		options:{ virtualHost:true },
		// #endif
		
		inject:['oGrid'],
		props: {
			text: String,
			icon:{
				type:String,
				default:require('@/uni_modules/o-grid/static/errorImg.svg')
			},
			dot:{
				type:[String,Boolean],
				default:false,
			},
			badge:{
				type:[Number,String],
				default:''
			},
			hoverClass:{
				type:String,
				default:'bg-over'
			},
			mode:{
				type:String,
				default:'aspectFit'
			}
		},
		data(){
			return {
				iconFont:'',
				iconImg:'',
				bgClass:'',
				bgStyle:'',
				colorClass:'',
				colorStyle:''
			}
		},
		created() {
			this.border = this.oGrid.border
			this.col = Number(this.oGrid.col)
			this.size = this.oGrid.size
			this.gutter = this.oGrid.gutter
			this.bg = this.oGrid.bg
			this.square = this.oGrid.square
			this.radius = this.oGrid.radius
			this.direction = this.oGrid.direction
			this.color = this.oGrid.color
			this.Bg();
			this.Color();
			this.Icon();
		},
        watch: {
			icon(val){
				
				this.Color();
				this.Icon();
			},
			bgc(e){
				this.Bg();
			}
		},
		computed: {
			Size(){
				if(this.size==='sm' || this.size==='lg') return this.size;
				return 'md' 
			},
			Radius(){
				if (this.gutter && this.radius) return 'radius';
				else return '';
			},
			Col(){
				if(this.col>5) return 'o-g-5';
				else if(this.col<2) return 'o-g-2';
				else return 'o-g-' + this.col
			},
			Gutter(){
				if(!this.gutter || this.gutter=='false') return '';
				else return 'gutter';
			},
			Border() {
				if(this.gutter==false && this.border==true) return 'border';
				else return '';
			},
			Square(){
				if(!this.square || this.square=='false') return '';
				else return 'square';
			},
			Direction(){
				if(this.direction==='row') return 'flex-dir-row';
				else return ''
			}
		},
		methods:{
			onClick(){
				this.$emit('click',{})
			},
			Icon(){
				if(this.icon.endsWith('.png') || this.icon.endsWith('.svg') || this.icon.endsWith('.jpg')) {
					this.iconImg = this.icon;
				} 
				else if(!this.icon || this.icon==' ') { this.iconImg = require('@/uni_modules/o-grid/static/errorImg.svg') }
				else {
					this.iconFont = this.icon;
				}
			},
			Bg(){
				if(this.bg.startsWith('#') || this.bg.startsWith('rgb(') || this.bg.startsWith('rgba(') || this.bg==='transparent') {
					this.bgStyle = 'background-color:' + this.bg
				} else { this.bgClass = this.bg }
			},
			Color(){
				if(this.color.startsWith('#') || this.color.startsWith('rgb(') || this.color.startsWith('rgba(')) {
					this.colorStyle = 'color:' + this.color
				} else { this.colorClass = this.color }
			}
		}
	}
</script>

<style lang="scss">
	$u:8rpx;
	.bg-over::after{
		content: '';
		position: absolute;
		z-index: 999;
		left:0;right:0;
		top:0;bottom:0;
		background-color: rgba(50,50,50,.03)!important;
	}
	.bg-white{background-color: #fff;}
	.o-grid-item {
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		&.gutter{padding:10rpx}
		&.border{padding:1rpx;}
		.o-grid-item_content{
			display: flex;
			flex-direction: column;
			flex-basis: 100%;
			justify-content: center;
			align-items: center;
			// padding: 16rpx 8rpx;
			height: 100%;
			text-align: center;
			position: relative;
			overflow: hidden;
			&.flex-dir-row{
				flex-direction:row!important;
				.o-text{
					padding-top: 0;
					margin-left: 16rpx;
				}
				.img{width: 52rpx !important;height:52rpx !important;}
				.txt{ font-size: 48rpx !important; }
			}
			&.radius{ border-radius: 16rpx; }
			.img{vertical-align: bottom;}
			.o-text{
				padding-top: 10rpx;
			}
			.o-icon{
				position: relative;
				.dot,.badge{
					position: absolute;
					display: block;
					z-index: 9;
					background-color: red;
					border-radius: 50rpx;
					
				}
				.badge{
					line-height:24rpx;
					height:24rpx;
					padding: 0 10rpx;
					color:#fff;
					font-size: 18rpx;
					right:0; top:0;
					margin: -12rpx 0 0 0;
					transform: translate(50%, 0);
				}
				.dot{
					width:16rpx;
					height:16rpx;
					right:0; top:0;
					margin: -8rpx -10rpx 0 0;
				}
			}
		}
	}
	@for $i from 2 through 5 {
		.o-grid-item{
			&.o-g-#{$i}{
				// min-height: 142rpx + ((6 - $i) * $u);
				flex-basis:(100% / $i);
				.o-grid-item_content{
					@if $i==2 {
						&.p{padding: 48rpx 8rpx!important;}
						.o-icon{
							&.sm{
								.img{ width:76rpx - $u; height:76rpx - $u; }
								.txt{ font-size: 72rpx - $u; }
							}
							&.md{
								.img{ width:76rpx; height:76rpx; }
								.txt{ font-size: 72rpx; }
							}
							&.lg{
								.img{ width:76rpx + $u; height:76rpx + $u; }
								.txt{ font-size: 72rpx + $u; }
							}
						}
					} @elseif $i==3 {
						&.p{padding: 28rpx 8rpx!important;}
						.o-icon{
							&.sm{
								.img{ width:74rpx - $u; height:74rpx - $u; }
								.txt{ font-size: 72rpx - $u; }
							}
							&.md{
								.img{ width:74rpx; height:74rpx; }
								.txt{ font-size: 72rpx; }
							}
							&.lg{
								.img{ width:74rpx + $u; height:74rpx + $u; }
								.txt{ font-size: 72rpx + $u; }
							}
						}
					} @elseif $i==4 {
						&.p{padding: 22rpx 8rpx!important;}
						.o-icon{
							&.sm{
								.img{ width:72rpx - $u; height:72rpx - $u; }
								.txt{ font-size: 72rpx - $u; }
							}
							&.md{
								.img{ width:72rpx; height:72rpx; }
								.txt{ font-size: 72rpx; }
							}
							&.lg{
								.img{ width:72rpx + $u; height:72rpx + $u; }
								.txt{ font-size: 72rpx + $u; }
							}
						}
					} @else {
						&.p{padding: 20rpx 8rpx!important;}
						.o-text{ font-size: 24rpx; }
						.o-icon{
							&.sm{
								.img{ width:64rpx - $u; height:64rpx - $u; }
								.txt{ font-size: 62rpx - $u; }
							}
							&.md{
								.img{ width:64rpx; height:64rpx; }
								.txt{ font-size: 62rpx; }
							}
							&.lg{
								.img{ width:62rpx + $u; height:62rpx + $u; }
								.txt{ font-size: 62rpx + $u; }
							}
						}
					}
				}
				&.square{
					height:100vw / $i;
					&.gutter{
						height:calc((100vw - 20rpx) / #{$i})!important;
					}
				}
			}
		}
	}
</style>
